<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      :default-sort="{ prop: 'date' }"
    >
      <el-table-column prop="date" label="日期" width="250"> </el-table-column>
      <el-table-column prop="name" label="发送人" width="250">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="700"> </el-table-column>
      <!-- <el-table-column prop="state" label="状态" width="180">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="actions" label="操作">
        <template slot-scope="scope">
          <el-button @click="read(scope.row)" type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.el-main {
  line-height: 0;
}
</style>

 <script>
export default {
  created: function () {
    this.getIndex();
  },
  methods: {
    getIndex() {
      this.$api({
        url: "/index/message",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          data.forEach((value) => {
            var listdata = {
              date: value.create_time.substring(0, 10),
              name: value.name,
              title: value.title,
              content: value.content,
            };
            this.tableData.push(listdata);
            listdata = "";
          });
        },
      });
    },
    read(row) {
      this.$alert(row.content, row.title, {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `阅读成功！`,
          });
        },
      });
    },
  },
  data() {
    return {
      tableData: [
      ],
    };
  },
};
</script>

